<template>
	<u-index-list :scrollTop="scrollTop" >
		<view v-for="(item, index) in list" :key="index">
			<u-index-anchor :index="item.letter" />
			<!-- #ifdef MP -->
			<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :data-city="item1" :key="index" @click.stop="selectCity">
				{{item1.city_name}}
			</view>
			  <!-- #endif -->
			  <!-- #ifdef H5 || APP-PLUS -->
			  <view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :data-city="item1" :key="index" @click.stop="selectCityH5(item1)">
			  	{{item1.city_name}}
			  </view>
			    <!-- #endif -->
		</view>
	</u-index-list>
</template>

<script>
	import {
		cityList
	} from '@/api/api.js';
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: [],
				list: []
			}
		},
		onLoad() {
			var that = this
			uni.showLoading({
				title:'加载中'
			})
		   cityList().then(res => {
              that.list = res.data			  
			  that.indexList = that.list.map(val => {
			  	return val.letter;
			  })		
			  uni.hideLoading()
		})
		},
		methods:{
			selectCity(e){
				console.log(e.target.dataset.city.city_name)
				uni.setStorage({key:'city_select', data:e.target.dataset.city.city_name});
				uni.setStorage({key:'city_id', data:e.target.dataset.city.id});
				this.$u.route({
					type: 'switchTab',
					url: '/pages/index/index'
				});
				// uni.navigateTo({
				// 	url: '/pages/real-bus/query-bus-detail/index?stationId='+this.stationid+'&lineId='+this.lineid+'&reveser_id='+this.reveser_id
				// })
				// uni.navigateTo({
				// 	url:'pages/index/index'
				// })
			},
			selectCityH5(item){
				uni.setStorage({key:'city_select', data: item.city_name});
				uni.setStorage({key:'city_id', data:item.id});
				this.$u.route({
					type: 'switchTab',
					url: '/pages/index/index'
				});
				
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>